<template>
  <div>
    <el-row>
      <el-col :span="12"
        ><div class="grid-content bg-purple">
          <el-button-group>
            <el-button @click="addUI()" type="success" icon="el-icon-edit"
              >添加</el-button
            >
          </el-button-group>
        </div></el-col
      >
      <el-col :span="11"
        ><div class="grid-content bg-purple-light">
          <el-input placeholder="请输入内容" v-model="name" clearable>
          </el-input></div
      ></el-col>
      <el-col :span="1"
        ><div class="grid-content bg-purple-light" style="float: left">
          <el-button
            @click="find()"
            type="success"
            icon="el-icon-search"
          ></el-button></div
      ></el-col>
    </el-row>

    <el-table
      border
      style="width: 100%"
      :data="pagination.records"
      ref="userTable"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
      >
      </el-table-column>

      <!--操作列-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="update(scope.row)" type="success">确认出库</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    >
    </el-pagination>

    <!--添加-->
        <el-dialog title="添加商品信息" :visible.sync="addTag" 
        :close-on-click-modal="false" top="10px">
            <el-form label-width="100px">
                <el-form-item label="出库订单编号"  >
                   <el-input v-model="delivery.deliveryid" autocomplete="off"></el-input>
                </el-form-item> 
                <el-form-item label="状态"  >
                   <el-input v-model="delivery.state" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="已收金额"  >
                   <el-input v-model="delivery.receivedprice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="待收金额"  >
                   <el-input v-model="delivery.collectionprice" autocomplete="off"></el-input>
                </el-form-item>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addTag = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
            </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      columns: [
        { prop: "deliveryid", label: "出库订单编号", width: "100" },
        { prop: "clientorderid", label: "客户销售订单号", width: "100" },
        { prop: "state", label: "状态", width: "100" },
         { prop: "clientOrderId", label: "客户", width: "100" },
         { prop: "receivedprice", label: "已收金额", width: "100" },
          { prop: "collectionprice", label: "待收金额", width: "100" },
        { prop: "clientOrder.clientsumcount", label: "总数量", width: "100" },
        { prop: "clientOrder.clientstate", label: "订单的状态", width: "100" },
      ],
      pagination: {},
      delivery: {},
      addTag: false,
      name: "",
     
      deliveryorders:{}
    };
  },
  components: {},
  methods: {
    find(page = 1, size = 2) {
      let url = "/Deliveryorder/selectDeliveryorder";
      let params = new URLSearchParams();
      params.append("page", page);
      params.append("size", size);
      params.append("deliveryId", this.name);

      this.$axios.post(url, params).then((resp) => {
        console.log(resp.data);
        this.pagination = resp.data;
      });
    },
    handleSizeChange(size) {
      this.find(this.pagination, size);
    },
    handleCurrentChange(page) {
      this.find(page, this.pagination.size);
    },
   addUI(){
            this.addTag=true;
      },
      add(){
        let url="Deliveryorder/InsertDeliveryorder";
        let params=this.name;
        this.$axios.post(url,params).then(resp=>{
            this.addTag=false;
               this.delivery={};
               this.find();
          });

      },
    update(row) {
      console.log(row);
      var url = "/Deliveryorder/updateDeliveryorder";
      let params = new URLSearchParams();
      params.append("deliveryid", row.deliveryid);
      this.$axios.post(url,params).then((resp) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.find();
      });
    },
  },
  mounted() {
    this.find();
  },
};
</script>

<style  scoped>
.avatar-uploader-icon,
.avatar {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon:hover,
.avatar:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

